<template>
    <div class="article__social">
        <ul class="article_tools">
            <li class="list__item">
                <button class="icon email">
                    <span class="screen-reader-text">Email icon</span>
                </button>
            </li>
            <li class="list__item">
                <button class="icon facebook js-facebook sharrre">
                    <span class="screen-reader-text">Facebook icon</span>
                </button>
            </li>
            <li class="list__item">
                <button class="icon twitter js-twitter sharrre">
                    <span class="screen-reader-text">Twitter icon</span>
                </button>
            </li>
            <li class="list__item">
                <button class="icon linkedin js-linkedin sharrre">
                    <span class="screen-reader-text">Linkedin icon</span>
                </button>
            </li>
            <li class="list__item">
                <button class="icon flipboard js-flipboard sharrre">
                    <span class="screen-reader-text">Flipboard icon</span>
                </button>
            </li>
        </ul>
        <ul class="js-mw-article-tools article_tools">
            <li class="list__item liicon">
                <button class="icon js-print">
                    <i class="icon icon--print"></i>
                    <span class="screen-reader-text">Print icon</span>
                </button>
            </li>
            <li class="list__item">
                <button class="icon js-text-resize">
                    <i class="icon icon--font"></i>
                    <span class="screen-reader-text">Resize icon</span>
                </button>
            </li>
        </ul>
    </div>
</template>
<script setup lang='ts'></script>
<style scoped lang='scss'>
.article__social {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    margin-bottom: 10px;
    min-height: 54px;

    .list__item {
        padding: 0;
        width: 35px;
        margin-right: 5px;
        position: relative;
        font-size: 12px;
        line-height: 17px;
        text-align: center;
        background-position: top;
        color: #c7c7d3;
        cursor: pointer;
        display: flex;
    }
}

.article_tools {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    align-items: baseline;
}

@media (min-width: 981px) {
    .article_tools>li {
        margin-top: 9px;
        margin-left: 0;
        float: none !important;

        .icon {
            position: relative;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #e1e1e1;
            margin: 0 4px 4px 0;
            outline-offset: 2px;
        }

        .email {
            background: #2e2e2e;
        }

        .email:before,
        .facebook:before,
        .twitter:before,
        .linkedin:before,
        .linkedin:before,
        .flipboard:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-family: icons;
            font-size: 1rem;
        }

        .facebook {
            background: #3b5998;
        }

        .flipboard:before {
            content: "";
        }

        .facebook:before {
            content: "";
        }

        .twitter {
            background: #55acee;
        }

        .linkedin {
            background: #0077b5;
        }

        .linkedin:before {
            content: "";
        }

        .flipboard {
            background: #e02828;
        }

        .linkedin:before {
            content: "";
        }

        .screen-reader-text {
            clip: rect(0 0 0 0);
            overflow: hidden;
            position: absolute;
            height: 1px;
            width: 1px;
            color: #fff;
        }
    }
}

.liicon {
    .icon {
        color: #6a6a6a;
    }
}

.icon--print:before {
    content: "";
}

.icon--font:before {
    content: "";
}
</style>